<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" style="max-width: 800px; margin: 20px auto;">
      <el-form-item label="酒店名称" prop="hotelName">
        <el-input v-model="form.hotelName" placeholder="请输入酒店名称"></el-input>
      </el-form-item>
      <el-form-item label="酒店图片" prop="hotelImage">
        <el-upload
          class="upload-demo"
          action="/api/upload"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload">
          <img v-if="imageUrl" :src="imageUrl" alt="" style="max-width: 200px; max-height: 200px; margin-bottom: 10px;">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="酒店价格" prop="hotelPrice">
        <el-input-number v-model="form.hotelPrice" min="0" :precision="0" :step="100"></el-input-number>
        <span slot="append">元/晚</span>
      </el-form-item>
      <el-form-item label="酒店地址" prop="hotelAddress">
        <el-input v-model="form.hotelAddress" placeholder="请输入酒店地址"></el-input>
      </el-form-item>
      <el-form-item label="酒店评论数" prop="hotelCommentCount">
        <el-input-number v-model="form.hotelCommentCount" min="0" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="关联城市" prop="cityId">
        <el-select v-model="form.cityId" placeholder="请选择关联城市">
          <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qrcode from 'qrcode'
import { getQrcode } from '@/api/alipay'
export default {
  name: 'HotelSystemAdminCc',

  data () {
    return {
      // payAddress: '',
      canvasSize: 256
    }
  },
  created () {

  },
  async mounted () {
    // 注意先加载数据 最后再往canvas中写
    const { data: res } = await getQrcode()
    this.payAddress = res.data.qr_code
    // 使用 qrcode 生成二维码图片
    qrcode.toCanvas(this.$refs.qrcodeCanvas, this.payAddress, {
      width: this.canvasSize,
      height: this.canvasSize
    })
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.pay-address {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
</style>
